<template>
	<view class="bodyView" :data-theme="dataTheme">
	<view class="bottomBar">
		<view v-for="item in menus" class="bottomItem"  @click="changeActive(item.index)">
			<image class="bottomImg"  :src="activeMenuIndex==item.index?item.aicon:item.icon" mode=""></image>
			<view class="activePoint" :class="{active:activeMenuIndex==item.index}"></view>
		</view>
		 
	</view>
	</view>
</template>

<script setup>
	import home from "@/static/icons/home.png"
	import home2 from "@/static/icons/home2.png"
	import profile from "@/static/icons/profile.png" 
	import profile2 from "@/static/icons/profile2.png"
	import bookmark from "@/static/icons/bookmark.png"
	import bookmark2 from "@/static/icons/bookmark2.png"
	import useSystemStore from '@/store/modules/system'
	const systemStore = useSystemStore()
	const { 
		dataTheme,
		activeMenuIndex 
	} = storeToRefs(systemStore); 
	 
	// const emit = defineEmits(['update:modelValue' ]);
	// const props = defineProps({
	// 	/**激活的菜单 */
	// 	modelValue: {
	// 		type: String,
	// 		default: 'home'
	// 	},  
	// })  
	// const activeMenu = computed({
	// 	get: () => { 
	// 		return props.modelValue
	// 	},
	// 	set: (val) => {
	// 		emit('update:modelValue', val)
	// 	}
	// }); 
	//菜单
	let menus=ref([
		{
			index:0,
			text:'home',
			icon:home,
			aicon:home2
		},
		{
			index:1,
			text:'bookmark',
			icon:bookmark,
			aicon:bookmark2
		},
		{
			index:2,
			text:'profile',
			icon:profile,
			aicon:profile2
		},
		
	])
	
	
	//菜单点击事件
	let changeActive=(index)=>{
		 
		activeMenuIndex.value=index
		//console.log(12312,activeMenu.value);
	}
</script>

<style lang="scss" scoped>
	.bodyView {
		 max-width: 90vw;
		 left: 50%;
		 transform: translate(-50%,0);
		 height: 140rpx;
		 position: fixed;
		 z-index: 1000;
		 bottom: 60rpx;
		transition: transform 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
	}
	.bottomBar{ 
		height: 100%;
		@include useTheme{
			background-color: getValue("bottombgColor"); 
		}
		border-radius: 148rpx;
		padding: 0 48rpx;
		column-gap: 48rpx;
		@include flex-teng;
		.bottomItem{
			@include flex-teng;
			position: relative;
			.bottomImg{
				width: 48rpx;
				height: 48rpx;
			}
			.activePoint{
				position: absolute;
				bottom: -20rpx;
				border-radius: 50%;
				width: 0;
				height: 0;
				background-color: $mainColor;
				transition: all 1.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
				&.active{
					width: 10rpx;
					height: 10rpx;
				}
			}
		}
	}
</style>